<template>
    <div class="rank-list">
        <el-row :gutter="16">
            <el-col :xs="24" :sm="12" :md="8">
                <el-card header="热力榜单" class="mb-4">
                    <div class="rank-item" v-for="x in sortBy(rankData.hotList,'shareNum').reverse()">
                        <el-image lazy :src="x.coverImg" class="w-12 h-18 !block mx-auto" fit="cover"></el-image>
                        <div class="flex-1 pl-2">
                            <div class="text-xl font-bold truncate mb-4">{{ x.title }}</div>
                            <div class="text-xs text-gray-400">作者：{{ x.userName || 'userName' }}</div>
                            <div class="text-xs text-gray-400">发布时间：{{ x.createTime }}</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8">
                <el-card header="完播率榜单" class="mb-4">
                    <div class="rank-item" v-for="x in sortBy(rankData.playList,'playNum').reverse()">
                        <el-image lazy :src="x.coverImg" class="w-12 h-18 !block mx-auto" fit="cover"></el-image>
                        <div class="flex-1 pl-2">
                            <div class="text-xl font-bold truncate mb-4">{{ x.title }}</div>
                            <div class="text-xs text-gray-400">作者：{{ x.userName || '匿名' }}</div>
                            <div class="text-xs text-gray-400">发布时间：{{ x.createTime }}</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8">
                <el-card header="点赞率榜单" class="mb-4">
                    <div class="rank-item" v-for="x in sortBy(rankData.praiseList,'likeNum').reverse()">
                        <el-image lazy :src="x.coverImg" class="w-12 h-18 !block mx-auto" fit="cover"></el-image>
                        <div class="flex-1 pl-2">
                            <div class="text-xl font-bold truncate mb-4">{{ x.title }}</div>
                            <div class="text-xs text-gray-400">作者：{{ x.userName || 'userName' }}</div>
                            <div class="text-xs text-gray-400">发布时间：{{ x.createTime }}</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import {getRankListApi} from '@/api/video/data'
import {sortBy} from 'lodash';

interface VideoData {
    id: number;
    title: string;
    coverImg: string;
    userName: string;
    createTime: string;
    shareNum: number;
    playNum: number;
    likeNum: number;
}

const rankData = ref<any>({
    hotList: [] as VideoData[],
    playList: [] as VideoData[],
    praiseList: [] as VideoData[]
});
const getData = async () => {
    const res = await getRankListApi();
    if (res.success) {
        rankData.value = res.data;
    }
}
getData();
</script>

<style lang="scss" scoped>
.rank-list {
    :deep(.el-card) {
        --el-card-padding: 8px 16px !important;
    }

    .rank-item {
        @apply flex items-center justify-start px-2 py-4 mx-2;
        &:not(:last-child) {
            border-bottom: 1px solid #eee;
        }
    }
}
</style>
